<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>N站——专注新闻，让每一位用户都能享受到最快最直接的新闻发布和订阅服务</title>
    <!-- 标题栏logo -->
    <link rel="icon" href="image/nLogo.jpg" type="image/x-icon">
    <!-- 收藏夹里显示的logo -->
    <link rel="shortcut icon" href="image/nLogo.jpg" type="image/x-icon">
    <!-- layui样式 -->
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    #timeNews img:hover{
        transition: all 1s;
        transform: scale(1.10);
    }
    #areaHot img:hover{
        transition: all 1s;
        transform: scale(1.10);
    }
</style>
<body style="background: #F0F0F0;">
<!--导航栏-->
<div class="layui-row layui-panel" style=" background: #222222;">
    <div class="layui-col-md2" style="padding: 10px; text-align: center;">
        <a href="index.html" style="color: white; font-weight: bolder; font-size: x-large;">N站</a>
    </div>
    <ul class="layui-nav layui-col-md6" lay-filter="" style="background: #222222;">
        <li class="layui-nav-item layui-this"><a href="index.html">首页</a></li>
        <li class="layui-nav-item"><a href="pages/home/homeNews.html">发现</a></li>
        <li class="layui-nav-item"><a href="pages/home/homePublisher.html">新闻方</a></li>
        <li class="layui-nav-item"><a href="pages/home/homeNewsType.html">新闻专栏</a></li>
        <li class="layui-nav-item"><a href="pages/home/homeSubscribe.html">我的订阅</a></li>
        <li class="layui-nav-item"><a href="">可能感兴趣</a></li>
    </ul>
    <ul class="layui-nav layui-col-md2" style=" background: #222222;">
        <li class="layui-nav-item">
            <a><img src="image/avatar.jpg" class="layui-nav-img">peng_YuJun</a>
            <dl class="layui-nav-child">
                <dd style="color: white; text-align: center; background: orange">硬币：0</dd>
                <dd><a href="pages/self/selfData.html">个人中心</a></dd>
                <dd><a href="pages/publish/publishNews.html">新闻管理</a></dd>
                <dd><a href="pages/publish/publishRequest.html">申请成为新闻作者</a></dd>
                <dd><a href="#">退出登录</a></dd>
            </dl>
        </li>
    </ul>
    <div class="layui-nav layui-col-md2" style=" background: #222222; display: flex;align-items: center; padding: 10px;">
        <button class="layui-btn layui-btn-sm" lay-event="register">注册</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="login">登录</button>
    </div>
</div>
<!--页面主体-->
<div class="layui-fluid" style="height: 90vh; overflow-y: scroll;">
    <div class="layui-row" style="display: flex;justify-content: center; margin-top: 10px;">
        <div class="layui-col-md9">
            <div class="layui-panel" style="padding: 40px; line-height: 40px;">
                <p style="font-size: larger; font-weight: bolder;">一个专注新闻发布和订阅服务的平台</p>
                <p>N站，专注新闻，让每一位用户都能享受到最快最直接的新闻发布和订阅服务！</p>
            </div>
        </div>
    </div>
    <div class="layui-row" style="display: flex;justify-content: center; margin-top: 10px;">
        <div class="layui-col-md9">
            <div class="layui-col-md8" style="padding-right: 10px;">
                <div class="layui-panel" style="padding: 10px; font-weight: bolder;">
                    <p>热门新闻</p>
                </div>
                <div class="layui-panel" style="padding: 10px;">
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;" >
                        <img src="image/news.jpg" style="width: 64px; height: 40px; margin-right: 10px;">
                        <div style="line-height: 24px; ">
                            <a href="pages/newsContent.html" target="_blank" style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻标题</a>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻内容</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">阅读量：0</p>
                        </div>
                    </div>
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;" >
                        <img src="image/news.jpg" style="width: 64px; height: 40px; margin-right: 10px;">
                        <div style="line-height: 24px; ">
                            <a href="pages/newsContent.html" target="_blank" style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻标题</a>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻内容</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">阅读量：0</p>
                        </div>
                    </div>
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;" >
                        <img src="image/news.jpg" style="width: 64px; height: 40px; margin-right: 10px;">
                        <div style="line-height: 24px; ">
                            <a href="pages/newsContent.html" target="_blank" style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻标题</a>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻内容</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">阅读量：0</p>
                        </div>
                    </div>
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;" >
                        <img src="image/news.jpg" style="width: 64px; height: 40px; margin-right: 10px;">
                        <div style="line-height: 24px; ">
                            <a href="pages/newsContent.html" target="_blank" style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻标题</a>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">新闻内容</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">阅读量：0</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel" style="padding: 10px; position: relative; font-weight: bolder;">
                    <p>活跃新闻方</p>
                    <a href="#" style="position: absolute; right: 10px; bottom: 10px; font-size: smaller; color: #1e9fff;">所有新闻方 ></a>
                </div>
                <div class="layui-panel" style="padding: 10px;">
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;  cursor: pointer;">
                        <img src="image/avatar.jpg" class="layui-nav-img" style="width: 50px; height: 50px; margin-right: 20px;">
                        <div style="line-height: 24px;">
                            <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者名称</p>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者简介</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">文章数：0</p>
                        </div>
                    </div>
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;  cursor: pointer;">
                        <img src="image/avatar.jpg" class="layui-nav-img" style="width: 50px; height: 50px; margin-right: 20px;">
                        <div style="line-height: 24px;">
                            <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者名称</p>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者简介</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">文章数：0</p>
                        </div>
                    </div>
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;  cursor: pointer;">
                        <img src="image/avatar.jpg" class="layui-nav-img" style="width: 50px; height: 50px; margin-right: 20px;">
                        <div style="line-height: 24px;">
                            <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者名称</p>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者简介</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">文章数：0</p>
                        </div>
                    </div>
                    <div class="layui-panel" style="padding: 10px; display: flex; position: relative;  cursor: pointer;">
                        <img src="image/avatar.jpg" class="layui-nav-img" style="width: 50px; height: 50px; margin-right: 20px;">
                        <div style="line-height: 24px;">
                            <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者名称</p>
                            <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者简介</p>
                            <p style="font-weight: lighter; font-size: smaller; position: absolute; right: 10px; bottom: 10px;">文章数：0</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="display: flex;justify-content: center; margin-top: 10px;">
        <div class="layui-col-md9">
            <div class="layui-panel" style="padding: 10px; font-weight: bolder;">
                <p>最新发布</p>
            </div>
            <div class="layui-panel layui-row" style="padding: 10px;">
                <div class="layui-panel layui-col-md3" id="timeNews" style=" padding: 10px;">
                    <img  src="image/news.jpg" style="width: 256px; height: 160px; cursor: pointer;" onclick="seeNews()">
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                        <p style="font-weight: lighter; font-size: smaller;">作者名称</p>
                    </div>
                </div>
                <div class="layui-panel layui-col-md3" id="timeNews" style=" padding: 10px;">
                    <img  src="image/news.jpg" style="width: 256px; height: 160px; cursor: pointer;" onclick="seeNews()">
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                        <p style="font-weight: lighter; font-size: smaller;">作者名称</p>
                    </div>
                </div>
                <div class="layui-panel layui-col-md3" id="timeNews" style=" padding: 10px;">
                    <img  src="image/news.jpg" style="width: 256px; height: 160px; cursor: pointer;" onclick="seeNews()">
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                        <p style="font-weight: lighter; font-size: smaller;">作者名称</p>
                    </div>
                </div>
                <div class="layui-panel layui-col-md3" id="timeNews" style=" padding: 10px;">
                    <img  src="image/news.jpg" style="width: 256px; height: 160px; cursor: pointer;" onclick="seeNews()">
                    <div style="line-height: 24px;">
                        <p style="font-weight: bolder; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                        <p style="font-weight: lighter; font-size: smaller;">作者名称</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="display: flex;justify-content: center; margin-top: 10px;">
        <div class="layui-col-md9">
            <div class="layui-panel" style="padding: 10px;  position: relative; font-weight: bolder;">
                <p>各专栏热点</p>
                <a href="#" style="position: absolute; right: 10px; bottom: 10px; font-size: smaller; color: #1e9fff;">所有专栏 ></a>
            </div>
            <div class="layui-panel layui-row">
                <div class="layui-col-md6" style="padding: 10px;">
                    <div class="layui-panel" style=" padding: 10px;">
                        <a href="#" style="color: #1e9fff;">某某专栏</a>
                    </div>
                    <div class="layui-panel layui-row" style="padding: 10px;">
                        <div class="layui-panel layui-col-md6" id="areaHot" style=" padding: 10px;">
                            <img src="image/news.jpg" style="width: 224px; height: 140px; cursor: pointer;" onclick="seeNews()">
                            <div style="line-height: 24px;">
                                <p style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                                <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者：名称</p>
                            </div>
                        </div>
                        <div class="layui-panel layui-col-md6" id="areaHot" style=" padding: 10px;">
                            <img src="image/news.jpg" style="width: 224px; height: 140px; cursor: pointer;" onclick="seeNews()">
                            <div style="line-height: 24px;">
                                <p style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                                <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者：名称</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6" style="padding: 10px;">
                    <div class="layui-panel" style=" padding: 10px;">
                        <a href="#" style="color: #1e9fff;">某某专栏</a>
                    </div>
                    <div class="layui-panel layui-row" style="padding: 10px;">
                        <div class="layui-panel layui-col-md6" id="areaHot" style=" padding: 10px;" onclick="seeNews()">
                            <img src="image/news.jpg" style="width: 224px; height: 140px; cursor: pointer;">
                            <div style="line-height: 24px;">
                                <p style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                                <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者：名称</p>
                            </div>
                        </div>
                        <div class="layui-panel layui-col-md6" id="areaHot" style=" padding: 10px;">
                            <img src="image/news.jpg" style="width: 224px; height: 140px; cursor: pointer;" onclick="seeNews()">
                            <div style="line-height: 24px;">
                                <p style="font-weight: bolder;overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;"><a href="pages/newsContent.html" target="_blank">新闻标题</a></p>
                                <p style="font-weight: lighter; font-size: smaller; overflow: hidden; width: 100%; white-space: nowrap;text-overflow: ellipsis;">作者：名称</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['util', 'layer','form','element'], function(){
        var element = layui.element
            ,util = layui.util;

        util.event('lay-event',{
            login : function (){
                window.location.href = "pages/user/userLogin.html";
            },
            register: function (){
                window.location.href = "pages/user/userRegister.html";
            }
        })
    });

    /**
     * 跳转到新闻的查看页面
     */
     function seeNews(newsId){
        window.open("pages/newsContent.html","_blank");
    }
</script>
</html>